<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>自定义指令</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 
				需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
				需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
				自定义指令总结：
						一、定义语法：
									(1).局部指令：
												new Vue({															new Vue({
													directives:{指令名:配置对象}   或   		directives{指令名:回调函数}
												})
										回调函数：我们定义的，我们没执行，最后执行了，这种调用流程称为回调																	})
									(2).全局指令：
													Vue.directive(指令名,配置对象) 或   Vue.directive(指令名,回调函数)

						二、配置对象中常用的3个回调：
									(1).bind：指令与元素成功绑定时调用。
									(2).inserted：指令所在元素被插入页面时调用。
									(3).update：指令所在模板结构被重新解析时调用。

						三、备注：
									1.指令定义时不加v-，但使用时要加v-；
									2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
		-->
	<!-- 准备好一个容器1-->
	<div id="root">
		<!-- 需求1 -->
		<h2>{{name}}</h2>
		<h2>当前的n值是：<span v-text="n"></span> </h2>
		<!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> -->
		<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
		<button @click="n++">点我n+1</button>

		<!-- 需求2 autofocus自动获取焦点 -->
		<hr />
		<input type="text" v-fbind:value="n">
	</div>

	<!-- 准备好一个容器2-->
	<!-- <div id="root2">
		<input type="text" v-fbind-all:value="all">
	</div> -->
</body>

<script type="text/javascript">
	Vue.config.productionTip = false

	// 定义全局指令
	// Vue.directive('fbind-all', {
	// 	//指令与元素成功绑定时（一上来）
	// 	bind(element, binding) {
	// 		element.value = binding.value
	// 	},
	// 	//指令所在元素被插入页面时
	// 	inserted(element, binding) {
	// 		element.focus()
	// 	},
	// 	//指令所在的模板被重新解析时
	// 	update(element, binding) {
	// 		element.value = binding.value
	// 	}
	// })

	new Vue({
		el: '#root',
		data: {
			name: '开放Vue',
			n: 1
		},
		// 定义局部指令
		directives: {

			// 自定义指令的坑，比如多个单词的指令。'big-number'(element,binding)='big-number':function(element,binding)
			'big-number': function (element, binding) {
				// console.log('big')
				element.innerText = binding.value * 10
			},

			// 需求1 big函数何时会被调用？1.指令与元素成功绑定时，不一定在页面上了（一上来）。2.指令所在的模板被重新解析时。
			// // 自定义指令-对象写法
			// big:{
			// 	k:v,
			// 	k:v
			// }

			// 自定义指令-函数写法 
			big(element, binding) {
				console.log('big', this) //注意指令中实例直接是window，this是window
				// console.log('big')
				// console.dir('big')
				// console.log(element instanceof HTMLElement)
				// 使用原生DOM操作元素
				element.innerText = binding.value * 10
			},

			/* 需求2 使用完整对象法创建指令，当vue处理一个调用一个函数 */
			fbind: {
				//指令与元素成功绑定时（一上来）
				bind(element, binding) {
					console.log('bind', this)
					// input输入框值=绑定值
					element.value = binding.value
				},
				//指令所在元素被插入页面时
				inserted(element, binding) {
					console.log('inserted', this)
					// 获取焦点，或者获取父元素等场景
					element.focus()
				},
				//指令所在的模板被重新解析时
				update(element, binding) {
					console.log('update', this)
					element.value = binding.value
					// 一直获取焦点，功能诡异
					element.focus()
				}
			}
		}
	})

	// vue实例2
	// new Vue({
	// 	el: '#root2',
	// 	data: {
	// 		all: 1
	// 	},
	// })

</script>

</html>